Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

remove regex's, fix entry module #55

Closed
wants to merge 10 commits into from

Conversation

jbellenger
Copy link
Collaborator

@jbellenger jbellenger commented May 12, 2017

This is builds on PR 51: add support for string module ids. A simpler delta between this and PR 51 is here

Background
At twitter, we want to adopt webpack2 so that we can leverage the HashedModuleIds plugin. This will create stable hashes for our modules and chunks, improving caching for our users.

Problem
The present method of rendering localized chunks does not behave well when using string module ids and webpack2. ProductionModePlugin puts the globalize-compiled-data into the first module of a chunk, assuming that the first module is always executed as the entry module. This is not the case in webpack2, where the id of the entry module is an argument to webpackJsonp and rendered into the chunk.

Proposal
Replace the regex module rewriting that's done post-render with something more webpacky that can be done pre-render. This is essentially the same behavior as what is done currently, but using webpack primitives instead of strings. Using these webpack primitives, we can identify the chunks entry module and ensure that modules are rewritten correctly.

TODOs

  • test with webpack1
  • test in production
  • address feedback

jbellenger added 9 commits March 27, 2017 16:37
- update regex to work with webpack2
- add tests cases for different module id scenarios
- instead of importing globalize as module 1, get its module id from the
  webpack stats
- move test output out of test dir, prevents endless loop when running
  `npm run test -- --watch`
- lint tests
// - non-entry modules will be rewritten to export globalize
this.chunks
.filter((chunk) => /globalize-compiled-data/.test(chunk.name))
.forEach((chunk) => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, update package.json node engine accordingly for such support, i.e., arrow functions, const, etc.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To reduce noise, I reverted all let/const/arrowfunctions. I'm happy to add them back in as a followup.

var rimraf = require("rimraf");
var fs = require("fs");
var webpack = require("webpack");
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: let's sort this list :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Added a rule for sort-requires to this PR

@rxaviers
Copy link
Owner

Thanks @jbellenger! Please, will that still work on webpack1? If it won't, let's simply remove the hacks to support both simultaneously and we tag it to lend as a next major.

"mocha": "^3.3.0",
"path-chunk-webpack-plugin": "^1.2.0",
"rimraf": "^2.6.1",
"webpack": "^1.15.0"
"webpack": "^2.5.1"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

newModule.context = module.context;
newModule.id = module.id;
newModule.dependencies = module.dependencies;
return newModule;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks wonderful

fnContent = globalizeCompilerHelper.compile(locale)
.replace("typeof define === \"function\" && define.amd", "false")
.replace(/require\("([^)]+)"\)/g, function(garbage, moduleName) {
return "__webpack_require__(" + globalizeModuleIdsMap[moduleName] + ")";
});

// Define all other individual globalize compiled data as a simple exports to Globalize.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we leave this comment? Otherwise, the else code below would be pretty confusing...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment restored.

@rxaviers
Copy link
Owner

This looks great!

@jbellenger
Copy link
Collaborator Author

Thanks for the comments, Rafael! I will:

  • address your feedback
  • test this with webpack1
  • test this in production at twitter

I'll run through these and update this PR next week.

@jbellenger
Copy link
Collaborator Author

webpack 1 dropped
I took a stab at running this with webpack1. It mostly works, though locale chunks generate this error on load:

Uncaught ReferenceError: __webpack_require__ is not defined
    at Object.<anonymous> (en.6860147fcfea9f96.js:1)
    at a (manifest.0f58aea068d86a70.js:1)
    at window.webpackJsonp (manifest.0f58aea068d86a70.js:1)
    at en.6860147fcfea9f96.js:1

I think this could probably be fixed, but for the sake of simplicity I've just removed support for webpack1 and bumped the version to 0.4.0

It looks like the example project referenced in README.md might need to be updated.

Production testing looks good
I deployed this to 1% of twitter mobile web traffic for 3 hours and saw no increase in client errors. I'm planning on moving all of mobile web traffic to webpack2 (and this code) later this week.

As far as I know, this is ready to merge.

- drop regexes
- add support for string module ids
- ensure that entry module is always executed
- drop webpack 1 support
- bump semver major

Signed-off-by: James Bellenger <jbellenger@twitter.com>
@rxaviers
Copy link
Owner

Merged via 23b7dbe

@rxaviers rxaviers closed this May 18, 2017
@rxaviers
Copy link
Owner

Thank you!!

@rxaviers
Copy link
Owner

Released 1.0.0-alpha.0 pre-release (webpack-2 only support).

rxaviers pushed a commit that referenced this pull request May 29, 2017
- use let/const/arrows
- add no-var lint rule
- 'use strict' everywhere
- drop webpack 1 support

Ref #55
Closes #58

Signed-off-by: James Bellenger <jbellenger@twitter.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants